<template>
  <div class="dashboard-container">
    <el-row class="welcome">
      <el-col :offset="0">
        {{ $t('dashboard.welcome', {name: profile.name, last_login_time: profile.last_login_time}) }}
      </el-col>
    </el-row>

    <el-row v-if="checkPermission(['admin.viewLog.statistics'])" :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="day7-statistics">
              <!-- <svg-icon icon-class="chart" /> -->
              <span v-html="'&nbsp;&nbsp;'" />{{ $t('dashboard.viewTrendTitle', {day}) }}
            </span>
            <!-- <el-button class="more-statistics">
              {{ $t('dashboard.more_statistics') }}
            </el-button> -->
          </div>
          <jsp-line-charts
            id="lineCharts"
            :title="chartsOptions.title"
            :xdate="chartsOptions.xdate"
            :xdata="chartsOptions.xdata"
            :yname="chartsOptions.yname"
            :ymin="chartsOptions.ymin"
            :ymax="chartsOptions.ymax"
            :legend-data="chartsOptions.legendData"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span> <span v-html="'&nbsp;&nbsp;'" />{{ $t('dashboard.platform_statistics') }} </span>
          </div>
          <pie-chart
            :name="systemPieOptions.name"
            :legend-data="systemPieOptions.legendData"
            :series-data="systemPieOptions.seriesData"
          />
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span> <span v-html="'&nbsp;&nbsp;'" />{{ $t('dashboard.browser_statistics') }} </span>
          </div>
          <pie-chart
            :name="browserPieOptions.name"
            :legend-data="browserPieOptions.legendData"
            :series-data="browserPieOptions.seriesData"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <span v-html="'&nbsp;&nbsp;'" />{{ $t('dashboard.system_info') }}
        </span>
      </div>

      <el-descriptions class="margin-top jsp-scroller" :column="3" border>
        <el-descriptions-item v-for="(item,index) in systemInfo" :key="index">
          <template slot="label">
            {{ item.name }}
          </template>
          {{ item.desc }}
        </el-descriptions-item>
      </el-descriptions>

    </el-card>

    <el-row class="copyright">
      <el-col :offset="0"><span v-html="$t('jishupu.copyright')" /></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import JspLineCharts from '@/components/Echarts/lineCharts'
import PieChart from '@/components/Echarts/PieChart'
// import CountTo from 'vue-count-to'
import { getStatistics } from '@/api/view-log'
import { getSystemInfo } from '@/api/system-info'
import checkPermission from '@/utils/permission'

export default {
  name: 'Dashboard',
  components: {
    JspLineCharts,
    PieChart
    // ,CountTo
  },
  data() {
    return {
      day: 0,
      chartsOptions: {
        xname: this.$t('common.date'),
        xdate: [
          // '2021-5-1',
        ],
        xdata: [
          // {
          //   name: '电脑网站',
          //   data: [820, 932, 20000, 300000, 400000, 50000, 5000],
          //   type: 'line',
          //   smooth: true
          // },
        ],
        yname: this.$t('dashboard.pv'),
        ymin: 0,
        ymax: 5000,
        legendData: []
      },
      systemPieOptions: {
        name: this.$t('dashboard.platform'),
        legendData: [
          // 'WINDOWS_10',
        ],
        seriesData: [
          // { value: 155081, name: 'WINDOWS_10' },
        ]
      },
      browserPieOptions: {
        name: this.$t('dashboard.browser'),
        legendData: [
          // 'CHROME',
        ],
        seriesData: [
          // { value: 204751, name: 'CHROME' },
        ]
      },
      systemInfo: [
      ]
    }
  },
  computed: {
    ...mapGetters(['profile'])
  },
  mounted() {
    this.getViewLog()
    this.getSystemInfoShow()
  },
  methods: {
    checkPermission,
    async getViewLog() {
      await getStatistics().then((response) => {
        const { daily, platform, browser } = response.data

        // 访问量统计
        const { day, legendData, xdate, ymax, xdata } = daily
        this.day = day
        this.chartsOptions.legendData = legendData
        this.chartsOptions.xdate = xdate
        this.chartsOptions.ymax = ymax
        this.chartsOptions.xdata = xdata.map((item) => {
          return {
            name: item.name,
            data: item.data,
            type: 'line',
            smooth: true
          }
        })

        // 系统统计信息
        this.systemPieOptions.seriesData = platform
        this.systemPieOptions.legendData = platform.map((item) => {
          return item.name
        })

        // 浏览器统计
        this.browserPieOptions.seriesData = browser
        this.browserPieOptions.legendData = browser.map((item) => {
          return item.name
        })
      }).catch(() => {})
    },
    async getSystemInfoShow() {
      await getSystemInfo().then((response) => {
        this.systemInfo = response.data
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
.dashboard {
  &-container {
    padding: 20px;
    .welcome {
      padding: 20px;
      margin-bottom: 15px;
      background-color: white;
      // border: 1px solid #{$border-color-lighter};
      // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .line-charts {
      padding: 20px;
    }

    .box-card {
      margin-bottom: 20px;
      .more-statistics {
        padding: 0;
        float: right;
        border: 0;
      }
    }

    .copyright {
      padding: 20px 0;
      height: 40px;
      text-align: center;
      border-top: 1px solid #{$border-color-lighter};
    }
  }
}

@media screen and (max-width: 510px) {
  .dashboard {
    &-container {
      .box-card {
        ::v-deep .el-descriptions {
          overflow-x: scroll
        }
      }
    }
  }
}

</style>
